<template>
  <h1>个人简历练习</h1>
  <table border="1px" align="center">
    <tr>
      <td>照片</td>
      <td><img :src="user.imgUrl" width="100px"></td>
    </tr>
    <tr>
      <td>姓名</td>
      <td>{{user.name}}</td>
    </tr>
    <tr>
      <td>年龄</td>
      <td>{{user.age}}</td>
    </tr>
    <tr>
      <td>好友</td>
      <td><ul v-for="item in user.friends" :key="item">
        <li>{{item}}</li>
      </ul></td>
    </tr>
  </table>
  <button @click="loadData">点击加载数据</button>
</template>

<script setup>
import {ref} from "vue";

const user = ref({
  imgUrl: '',
  name: "",
  age: '',
  friends: []
});
const loadData=()=>{
  user.value = {
    name: "张三",
    age: 18,
    imgUrl: 'mwzz.png',
    friends: ["李四", "王五", "赵六"]
  }
}
</script>

<style scoped>

</style>